<div class="p-4">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg font-semibold">数据表列表</h3>
    <button
      (click)="createTable()"
      class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700"
    >
      + 添加表格
    </button>
  </div>

  @if (tablesService.tables().length > 0) {
    <div class="space-y-2">
      @for (table of tablesService.tables(); track table.id) {
        <div
          class="p-3 rounded border transition-colors"
          [class.bg-blue-50]="isTableSelected(table.id)"
          [class.border-blue-200]="isTableSelected(table.id)"
          [class.bg-gray-50]="!isTableSelected(table.id)"
          [class.border-gray-200]="!isTableSelected(table.id)"
        >
          <div class="flex items-center justify-between">
            <h4
              class="font-medium cursor-pointer hover:text-blue-600"
              (click)="editTable(table.id)"
            >
              {{ table.name }}
            </h4>
            <div class="flex space-x-2">
              <button
                (click)="addField(table.id)"
                class="text-green-600 hover:text-green-800 text-sm"
                title="添加字段"
              >
                + 字段
              </button>
              <button
                (click)="editTable(table.id)"
                class="text-blue-600 hover:text-blue-800 text-sm"
              >
                编辑
              </button>
              <button
                (click)="deleteTable(table.id)"
                class="text-red-600 hover:text-red-800 text-sm"
              >
                删除
              </button>
            </div>
          </div>

          @if (table.fields.length > 0) {
            <div class="mt-2 text-sm text-gray-600">
              <div class="font-medium mb-1">字段 ({{ table.fields.length }}):</div>
              <div class="space-y-1 max-h-32 overflow-y-auto">
                @for (field of table.fields; track field.id) {
                  <div class="flex items-center space-x-2 text-xs">
                    <span class="font-mono">{{ field.name }}</span>
                    <span class="text-gray-400">{{ field.type }}</span>
                    @if (field.primaryKey) {
                      <span class="px-1 py-0.5 bg-yellow-100 text-yellow-800 rounded">PK</span>
                    }
                    @if (field.foreignKey) {
                      <span class="px-1 py-0.5 bg-blue-100 text-blue-800 rounded">FK</span>
                    }
                    @if (field.notNull) {
                      <span class="px-1 py-0.5 bg-red-100 text-red-800 rounded">NOT NULL</span>
                    }
                    @if (field.unique) {
                      <span class="px-1 py-0.5 bg-purple-100 text-purple-800 rounded">UNIQUE</span>
                    }
                  </div>
                }
              </div>
            </div>
          } @else {
            <div class="mt-2 text-sm text-gray-400">暂无字段</div>
          }
        </div>
      }
    </div>
  } @else {
    <div class="text-center py-8 text-gray-500">
      <svg class="w-12 h-12 mx-auto mb-4 text-gray-300 fill-none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
      </svg>
      <p>还没有创建任何数据表</p>
      <button
        (click)="createTable()"
        class="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        创建第一个表格
      </button>
    </div>
  }
</div>
